/*
    Example

    none: supposed to be similar to Flex
 */
$(function() {

    var $boxList = $(".Box");

    var boxHeight = 0;
    var boxWidth = 0;

    for(x=0; x<$boxList.length; x++) {

        var $box = $($boxList[x]);

        $box.css("position", "relative");

        var $children = $box.children();
        $box.empty();

        if($children.length > 0) {

            layoutChild($children[0])

            $box.append($children[0]);
        }

        if($children.length > 1) {

            for(y=1; y<$children.length; y++) {

                var child = $children[y];
                layoutChild($children[y])
                $box.append(child);
            }
        }
    }

    function layoutChild(child) {

        var $child = $(child);

        var top = $child.attr("data-top");
        var left = $child.attr("data-left");
        var bottom = $child.attr("data-bottom");
        var right = $child.attr("data-right");

        var hasTop = true;
        var hasLeft = true;
        var hasBottom = true;
        var hasRight = true;

        if(!top) {
            top = 0;
            hasTop = false;
        }
        else {
            top = parseInt(top);
        }

        if(!left) {
            left = 0;
            hasLeft = false;
        }
        else {
            left = parseInt(left);
        }

        if(!bottom) {
            bottom = 0;
            hasBottom = false;
        }
        else {
            bottom = parseInt(bottom);
        }

        if(!right) {
            right = 0;
            hasRight = false;
        }
        else {
            right = parseInt(right);
        }

        var height = $child.height();
        var width = $child.width();

        if(boxHeight < top + height + bottom) {
            boxHeight = top + height + bottom;
        }

        if(boxWidth < left + width + right) {
            boxWidth = left + width + right;
        }

        $child.css("position", "absolute");
        $child.css("display", "inline-block");

        if(hasTop) {
            $child.css("top", top + "px");
        }

        if(hasLeft) {
            $child.css("left", left + "px");
        }

        if(hasBottom) {
            $child.css("bottom", bottom + "px");
        }

        if(hasRight) {
            $child.css("right", right + "px");
        }
    };
});